// 一个组件就是一个函数
import React , {useState} from 'react';
// 1. 组件化

import HellowComponent from './hello';

import NameEditComponent from './nameEdit';

import './index.css';

const App = () =>{
  // 2. data
  // data + setdata 综合体
  const [name,setname]=useState('initialName');
  const setUsernameState=(event)=>{
    // console.log(event.target.value);
    setname(event.target.value);
  }
  return (
    <div className="demo">
      App {name}
      <HellowComponent userName={name} />
      <NameEditComponent userName={name} onChange={setUsernameState}/>
    </div>
  )
}
export default App; //  抛出一个模块  模块化输出App 根组件
